/* 自定义配色 */
:root {
  --el-color-primary: #34d399 !important;
  --el-color-primary-light-1: #065f46 !important;
  --el-color-primary-light-2: #047857 !important;
  --el-color-primary-light-3: #059669 !important;
  --el-color-primary-light-4: #10b981 !important;
  --el-color-primary-light-5: #34d399 !important;
  --el-color-primary-light-6: #6ee7b7 !important;
  --el-color-primary-light-7: #a7f3d0 !important;
  --el-color-primary-light-8: #d1fae5 !important;
  --el-color-primary-light-9: #ecfdf5 !important;
  --el-color-primary-dark-2: #337ecc !important;
  --el-text-color-primary: text-slate-700;
  /* 图片圆角 */
  --my-border-radius: 8px;
  /* 进度条高度 */
  --progress-bar-height: 4px;
  /* 全局背景颜色 */
  --my-background-color: #fff;
  /* 全局hover背景颜色 */
  --my-hover-background-color: #e9e9e9;
}

/* 溢出隐藏不换行 */
.my-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* 屏幕宽度小于400px就隐藏元素 */
@media (max-width: 400px) {
  .hidden-less-400 {
    display: none !important;
  }
}

/* 屏幕宽度大于400px就隐藏元素 */
@media (min-width: 400px) {
  .hidden-more-400 {
    display: none !important;
  }
}

/* 屏幕宽度小于600px就隐藏元素 */
@media (max-width: 600px) {
  .hidden-less-600 {
    display: none !important;
  }
}

/* 屏幕宽度大于600px就隐藏元素 */
@media (min-width: 600px) {
  .hidden-more-600 {
    display: none !important;
  }
}

/* 屏幕宽度小于800px就隐藏元素 */
@media (max-width: 800px) {
  .hidden-less-800 {
    display: none !important;
  }
}

/* 屏幕宽度大于800px就隐藏元素 */
@media (min-width: 800px) {
  .hidden-more-800 {
    display: none !important;
  }
}

/* 屏幕宽度小于1000px就隐藏元素 */
@media (max-width: 1000px) {
  .hidden-less-1000 {
    display: none !important;
  }
}

/* 屏幕宽度大于1000px就隐藏元素 */
@media (min-width: 1000px) {
  .hidden-more-1000 {
    display: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --el-color-primary: #059669 !important;
    --el-color-primary-light-9: #57534e !important;
    --el-border-color-base: #57534e !important;
    --el-text-color-regular: #e2e8f0 !important;
    --el-text-color-primary: text-slate-200 !important;
    --el-bg-color: #474648 !important;
    --el-color-white: #1e1e1f !important;
    --el-border-color-lighter: #474648 !important;
    --el-border-color-light: #474648 !important;
    --el-popover-bg-color: #292524 !important;
  }

  /* 自动切换时 */
  html.dark {
    --my-background-color: #000000 !important;
    --my-hover-background-color: #262626 !important;
    background-color: 5000ms linear;
  }

  html.dark .el-header {
    background-color: #000 !important;
  }

  html.dark .el-main {
    background-color: #1e1e1f !important;
  }

  html.dark .el-footer {
    background-color: #000 !important;
  }

  html.dark .el-aside {
    background-color: #000 !important;
  }

  html.dark .discover {
    background-color: #000 !important;
  }

  html.dark .group {
    background-color: #000 !important;
  }

  html.dark .card:hover {
    background-color: #525252;
  }

  html.dark .tab {
    background-color: #000 !important;
  }

  html.dark .music {
    background-color: #000 !important;
  }

  html.dark .el-tabs__header {
    background-color: #000 !important;
  }

  html.dark .artistDetail {
    background-color: #000 !important;
  }

  html.dark .video {
    background-color: #000 !important;
  }

  html.dark .mv {
    background-color: #000 !important;
  }

  html.dark .comments .comment-input .box {
    background-color: #000 !important;
  }

  html.dark .comments .comment-hot .grid .filter .box {
    background-color: #000 !important;
  }

  html.dark .comments .comment-all .box {
    background-color: #000 !important;
  }

  html.dark .allPlaylist {
    background-color: #000 !important;
  }

  html.dark .albumDetail {
    background-color: #000 !important;
  }

  html.dark .searchDetail {
    background-color: #000 !important;
  }

  html.dark .el-tabs {
    background-color: #000 !important;
  }

  html.dark .userDetail {
    background-color: #000 !important;
  }

  html.dark .userDetail-info .box {
    background-color: rgb(0 0 0 / 50%) !important;
  }

  html.dark .userDetail-comment .vfor .right {
    color: #fff !important;
  }

  html.dark .videoDetail {
    background-color: #000 !important;
  }

  html.dark button.el-button.is-round {
    color: #fff !important;
  }

  html.dark .videoDetail .mvs-title {
    color: #fff !important;
  }

  html.dark .videoDetail .comment-title {
    color: #fff !important;
  }

  html.dark .searchTitle {
    background-color: #000 !important;
  }

  html.dark .songList .list .item {
    color: #cfcfcf !important;
  }

  html.dark .volume {
    background-color: #000 !important;
    box-shadow: rgb(255 255 255 / 15%) 0px 2px 8px;
  }

  html.dark .rankingList .vfor .right .content .seeMore {
    color: rgb(255 255 255 / 64%) !important;
  }

  html.dark .el-input__wrapper {
    background-color: #2c2c2c !important;
  }

  html.dark .dailySongs-list {
    background-color: #000 !important;
  }

  html.dark .dailySongs-info .title .mask {
    background-color: rgb(66 66 66 / 70%) !important;
  }

  html.dark .loginDialog .avatar .card {
    background-color: #000 !important;
    border: 2px solid #fff !important;
  }

  html.dark .myLike {
    background-color: #000 !important;
  }

  html.dark .header {
    background-color: #000 !important;
  }

  html.dark .searchItem:hover {
    background-color: #3e3e3e !important;
  }

  html.dark .el-drawer {
    background-color: #000 !important;
  }

  html.dark .loginDialog .avatar .card .menu-item {
    color: #fff !important;
  }
}

html.dark {
  --my-background-color: #000000 !important;
  --my-hover-background-color: #262626 !important;
}

html.dark .el-header {
  background-color: #000 !important;
}

html.dark .el-main {
  background-color: #1e1e1f !important;
}

html.dark .el-footer {
  background-color: #000 !important;
}

html.dark .el-aside {
  background-color: #000 !important;
}

html.dark .discover {
  background-color: #000 !important;
}

html.dark .group {
  background-color: #000 !important;
}

html.dark .card:hover {
  background-color: #525252;
}

html.dark .tab {
  background-color: #000 !important;
}

html.dark .music {
  background-color: #000 !important;
}

html.dark .el-tabs__header {
  background-color: #000 !important;
}

html.dark .artistDetail {
  background-color: #000 !important;
}

html.dark .video {
  background-color: #000 !important;
}

html.dark .mv {
  background-color: #000 !important;
}

html.dark .comments .comment-input .box {
  background-color: #000 !important;
}

html.dark .comments .comment-hot .grid .filter .box {
  background-color: #000 !important;
}

html.dark .comments .comment-all .box {
  background-color: #000 !important;
}

html.dark .allPlaylist {
  background-color: #000 !important;
}

html.dark .albumDetail {
  background-color: #000 !important;
}

html.dark .searchDetail {
  background-color: #000 !important;
}

html.dark .el-tabs {
  background-color: #000 !important;
}

html.dark .userDetail {
  background-color: #000 !important;
}

html.dark .userDetail-info .box {
  background-color: rgb(0 0 0 / 50%) !important;
}

html.dark .userDetail-comment .vfor .right {
  color: #fff !important;
}

html.dark .videoDetail {
  background-color: #000 !important;
}

html.dark button.el-button.is-round {
  color: #fff !important;
}

html.dark .videoDetail .mvs-title {
  color: #fff !important;
}

html.dark .videoDetail .comment-title {
  color: #fff !important;
}

html.dark .searchTitle {
  background-color: #000 !important;
}

html.dark .songList .list .item {
  color: #cfcfcf !important;
}

html.dark .volume {
  background-color: #000 !important;
  box-shadow: rgb(255 255 255 / 15%) 0px 2px 8px;
}

html.dark .rankingList .vfor .right .content .seeMore {
  color: rgb(255 255 255 / 64%) !important;
}

html.dark .el-input__wrapper {
  background-color: #2c2c2c !important;
}

html.dark .dailySongs-list {
  background-color: #000 !important;
}

html.dark .dailySongs-info .title .mask {
  background-color: rgb(66 66 66 / 70%) !important;
}

html.dark .loginDialog .avatar .card {
  background-color: #000 !important;
  border: 2px solid #fff !important;
}

html.dark .myLike {
  background-color: #000 !important;
}

html.dark .header {
  background-color: #000 !important;
}

html.dark .searchItem:hover {
  background-color: #3e3e3e !important;
}

html.dark .el-drawer {
  background-color: #000 !important;
}

html.dark .loginDialog .avatar .card .menu-item {
  color: #fff !important;
}
